<template>
    <!-- 拖动右边距改变div宽度 -->
    <div :id="`height${moveId}`" class="y-handle" @mousedown="mouseDown" @mouseup="mouseUp"></div>
</template>

<script>
export default {
    name: 'ChangeHeight',
    props: {
        index: {
            type: String,
            default: () => {
                return '';
            }
        },
        moveId: {
            type: String,
            default: () => {
                return '';
            }
        }
    },
    data() {
        return {
            lastY: ''
        };
    },
    methods: {
        mouseDown(event) {
            document.addEventListener('mousemove', this.mouseMove);
            this.lastY = event.screenY;
        },
        mouseMove(e) {
            this.$emit('heightChange', { height: e.screenY - this.lastY, index: this.index });
            this.lastY = e.screenY;
        },
        mouseUp() {
            this.lastY = '';
            document.removeEventListener('mousemove', this.mouseMove);
            this.$emit('clearEvent');
        }
    }
};
</script>

<style lang="less" scoped>
.y-handle {
    width: 30px;
    cursor: pointer;
    background-color: #2364D9;
    height: 5px;
    position: absolute;
    right: 40%;
    bottom: 0;
}
</style>
